<template>
	<div class="postInspect">
		<Row :gutter="16">
			<i-form :model="formItem" :label-width="150" >
				<i-col span="5">
					<Form-item label="选择时间：">
						<Date-picker type="daterange" placement="bottom-start" placeholder="选择日期" v-model="formItem.timeFrame" @on-change="changetime"></Date-picker>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择部门：">
						<i-select v-model="formItem.department" @on-change="changedepartment">
							<i-option v-for="item in departments" :value="item.name">{{ item.name }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择校区：">
						<i-select v-model="formItem.campus" @on-change="changecampus">
							<i-option v-for="item in campus" :value="item.campusName">{{ item.campusName }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="8" style="text-align: right">
					<Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon> 导出数据</Button>
				</i-col>
			</i-form>
		</Row>
		<Row :gutter="16">
			<i-table ref="table" border :content="self" :columns="columns" :data="data"></i-table>
		</Row>
	</div>
</template>

<script>
export default {

	name: 'postInspect',

	data () {
		return {
			self: this,
			formItem:{
				timeFrame:['2017-11-7','2017-4-5'],
				department:'技术部',
				campus:'屯溪路校区'
			},
			departments:this.$store.state.allDepartment,
			campus:this.$store.state.allCampus,
			columns: [
			{
				title: '发帖人',
				key: 'people'
			},
			{
				title: '部门',
				key: 'department'
			},
			{
				title: '校区',
				key: 'campus'
			},
			{
				title: '发帖数',
				key: 'postnum',
				render: (h, params) => {
					return h('p', [
						h('span',params.row.postnum),
						h('span',' 贴')
						]);

				}
			},
			],
			data:[
			{	
				people: '邢力',
				department: '技术部',
				campus: '屯溪路校区',
				postnum:'6',
			},
			]
		}
	},
	methods: {
		changetime(index){
			console.log(index)
		},
		changedepartment(index){
			console.log(index)
		},
		changecampus(index){
			console.log(index)
		},
		exportData () {
			this.$refs.table.exportCsv({
				filename: `${this.formItem.campus}${this.formItem.department}发帖情况`,
				columns: this.columns,
				data: this.data
			});
		}  
	}
}
</script>

<style lang="css" scoped>
.postInspect{
	width: 100%;
	height: 100%;
	padding-left: 20px;
	padding-right: 20px
}
</style>